<style lang="sass" scoped>
    .container{
        min-width:768px;
    }
    .mode{
        width:160px;
        border:1px solid #ccc;
        float: left;
        .top{
            background:#fff4a2;
            height:60px;
            line-height:50px;
            text-align:center;
            border-bottom:10px solid #ccc;
        }
        .detail{
            .group{
                width:100%;
                height:50px;
                line-height:50px;
                background:#e1f2ff;
                margin-bottom:20px;
                text-align:center;
                overflow:hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
                &.active{
                    background: #337ab7;
                    color:#fff;
                }
            }
            .add-mode{
                width: 140px;
                height:50px;
                line-height:50px;
                margin:30px auto;
                border:1px solid #ccc;
                text-align: center;
                font-size: 30px;
                cursor: pointer;
            }
        }
    }
    .mode-set{
        float: left;
        margin-left:50px;
        width: 500px;
        border:1px solid #ccc;
        padding:5px;
        .title{
            margin-bottom:10px;
            font-size:20px;
            border-bottom:2px solid #337ab7;
        }
        .group{
            margin-bottom:10px;
            .labels{
                width:120px;
                float:left;
            }
            .cont{
                width:350px;
                float:left;
            }
        }
        .choiced{
            border-bottom:1px solid #ccc;
            padding-bottom:10px;
        }
        .px{
            padding:10px 0;
        }
        .add-mode{
            width: 140px;
            height:50px;
            line-height:50px;
            margin:30px auto;
            border:1px solid #ccc;
            text-align: center;
            font-size: 30px;
            cursor: pointer;
        }
    }
    .content-set{
        border-bottom:1px dashed #ccc;
        margin-bottom:20px;
    }
    .temps{
        width:510px;
        .group{
            width:150px;
            height:130px;
            float:left;
            border:1px solid #ccc;
            padding:10px;
            margin-right:30px;
            &.active{
                border:1px solid #8dbdf9;
                box-shadow:0 0 3px 0 #8dbdf9;
            }
            &:nth-child(3n){
                margin-right:0;
            }
            .title{
                text-align:center;
            }
            img{
                width:130px;
                height:60px;
                display:block;
                margin:20px auto 0;
            }
        }
    }
    .tags-cont{
        margin-top:10px;
        .el-tag{
            margin:0 10px 10px 0;
        }
    }
    
</style>
<template>
    <div v-jurdie="'book5100'" class="container pd15 clearfix">
        <div class="mode">
            <div class="top">首页配置</div>
            <div class="detail">
                <div 
                    @click="modeIndex = i"
                    v-for="(item,i) in modelist"
                    class="group" :class="{'active':i===modeIndex}">{{item.columnName}}</div>
                <div v-jurdie="'book5101'" @click="tempShow()" class="add-mode">+</div>
            </div>
        </div>
        <div v-if="modelist.length>0" class="mode-set">
            <div class="group choiced clearfix">
                <div class="labels">已选栏目</div>
                <div class="cont">{{modelist[modeIndex].columnName}}</div>
            </div>
            <div class="group px clearfix">
                <div class="labels">栏目排序</div>
                <div class="cont">{{modelist[modeIndex].sort}}</div>
            </div>
            <div class="group clearfix">
                <div class="labels">&nbsp;</div>
                <div class="cont">
                    <el-button @click="up(modeIndex)" v-if="modelist.length>0&&modeIndex!==0" type="primary">上移</el-button>
                    <el-button @click="down(modeIndex)" v-if="modelist.length>0&&modeIndex!==modelist.length-1" type="primary">下移</el-button>
                    <el-button v-jurdie="'book5102'" @click="del(modeIndex)" type="primary">删除栏目</el-button>
                </div>
            </div>
            <div class="title mt20">内容配置</div>
            <div class="content-set" v-for="(item,i) in modelist[modeIndex].contextList">
                <!-- 配置类目 -->
                <div v-if="modelist[modeIndex].type === 'categ'" class="group clearfix">
                    <div class="labels">类目</div>
                    <div class="cont">
                        <el-select v-model="item.categId" placeholder="请选择类目">
                            <el-option v-for="item in categlist" :key="item.categId" :label="item.categName" :value="item.categId">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <!-- 配置itemList -->
                <div v-if="modelist[modeIndex].type === 'activity'" class="group clearfix">
                    <div class="labels">商品列表</div>
                    <div class="cont">
                        <el-select
                            v-model="keyWord"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入关键词"
                            :remote-method="remoteMethod"
                            @change="change"
                            :loading="loading">
                                <el-option
                                    v-for="(item2,i2) in itemlist"
                                    :key="item2.itemCode"
                                    :label="item2.itemName"
                                    :value="i+ '@@' + item2.itemName + '@@' +item2.itemCode">
                                </el-option>
                        </el-select>
                        <div class="tags-cont">
                            <el-tag
                                v-for="(tag,i2) in item.itemList"
                                :key="tag.itemName"
                                closable
                                @close="close(item.itemList,i2)">
                                {{tag.itemName}}
                            </el-tag>
                        </div>
                        <!-- <el-input v-model="item.itemList" placeholder="请输入商品id，以,分割"></el-input> -->
                    </div>
                </div>
                <!-- 配置图片 -->
                <div class="group clearfix">
                    <div class="labels">图片</div>
                    <div class="cont">
                        <upload-image v-if="modelist[modeIndex].type==='single_banner'||modelist[modeIndex].type==='more_banner'" :data.sync="item.bannerImageUrl" :limit="1" remark="分辨率：750*440"></upload-image>
                        <upload-image v-if="modelist[modeIndex].type==='categ'" :data.sync="item.bannerImageUrl" :limit="1" remark="分辨率：750*440"></upload-image>
                        <upload-image v-if="modelist[modeIndex].type==='activity'" :data.sync="item.bannerImageUrl" :limit="1" remark="分辨率：698*210"></upload-image>
                    </div>
                </div>
                <div v-if="modelist[modeIndex].type==='activity'" class="group clearfix">
                    <div class="labels">banner图片</div>
                    <div class="cont">
                        <upload-image  :data.sync="item.detailBannerImageUrl" :limit="1" remark="分辨率：750*442"></upload-image>
                    </div>
                </div>
                <!-- <div v-if="modelist[modeIndex].type==='activity'" class="group clearfix">
                    <div class="labels">背景颜色</div>
                    <div class="cont">
                        <el-input v-model="item.backgroundColor" placeholder="请输入背景颜色"></el-input>
                    </div>
                </div> -->
                <div v-if="modelist[modeIndex].type==='single_banner'||modelist[modeIndex].type==='more_banner'" class="group clearfix">
                    <div class="labels">图片跳转链接</div>
                    <div class="cont">
                        <el-input v-model="item.imageLink" placeholder="请输入跳转地址"></el-input>
                    </div>
                </div>
                <el-button v-jurdie="'book5104'" @click="close(modelist[modeIndex].contextList,i)" class="mb20 ml20" type="danger">删除</el-button>
            </div>
            <div v-if="modelist[modeIndex].contextList.length<modelist[modeIndex].maxContextCount" @click="addDetail()" v-jurdie="'book5103'" class="add-mode">+</div>
            <div class="title mt20">栏目配置</div>
            <div class="group clearfix">
                <div class="labels">栏目标题</div>
                <div class="cont">
                    <el-input v-model="modelist[modeIndex].title" placeholder="请输入栏目标题"></el-input>
                </div>
            </div>
            <div v-if="modelist[modeIndex].type==='activity'" class="group clearfix">
                <div class="labels">背景颜色</div>
                <div class="cont">
                    <el-input v-model="modelist[modeIndex].backgroundColor" placeholder="请输入背景颜色"></el-input>
                </div>
            </div>
            <div class="group clearfix">
                <div class="labels">&nbsp;</div>
                <div class="cont">
                    <el-button @click="modifyColumData()" type="primary">提交更新</el-button>
                </div>
            </div>
        </div>

        <el-dialog title="栏目模块" :visible.sync="tempObj.show" width="550px">
            <div class="temps clearfix">
                <div @click="choice(item)" v-for="(item,i) in templist" class="group" :class="{'active':item.templateCode===tempObj.choice.templateCode}">
                    <div class="title">{{item.templateName}}</div>
                    <img v-if="item.templateImageUrl" :src="item.templateImageUrl" alt="">
                </div>
            </div>
            <div class="mt20">
                <el-button v-jurdie="'book5105'" type="primary" @click="commit()">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import uploadImage from 'components/uploadImage'
    export default {
        components: {
            uploadImage
        },
        data() {
            return {
                //列表搜索参数
                modeCode:'index',
                modelist:[],
                modeIndex:0,
                categlist:[],
                templist:[],
                tempObj:{
                    show:false,
                    choice:{}
                },
                itemlist:[],
                loading: false,
                keyWord:'',
            };
        },
        watch:{
            
        },
        created(){
            server.getCategList().then(res=>{
                this.categlist = res;
            })
            this.getTemp();
        },
        mounted() {
            this.$nextTick(() => {
                this.getMallColumn();
             });
        },
        methods: {
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            getTemp(){
                util.ajax({
                    url:config.baseApi + 'bookMall-admin/api/home/getColumnTemplate',
                    success:(data=>{
                        this.templist = data.data;
                    })
                })
            },
            getMallColumn(){
                util.ajax({
                    url:config.baseApi + 'bookMall-admin/api/home/getMallColumn',
                    data:{
                        modeCode:this.modeCode
                    },
                    success:(data=>{
                        data.data.forEach((item,i) => {
                            item.contextList.forEach((item2,i2)=>{
                                if(item2.bannerImageUrl){
                                    item2.bannerImageUrl = item2.bannerImageUrl.split(',')
                                }else{
                                    item2.bannerImageUrl = []
                                }
                                if(item2.detailBannerImageUrl){
                                    item2.detailBannerImageUrl = item2.detailBannerImageUrl.split(',')
                                }else{
                                    item2.detailBannerImageUrl = []
                                }
                                if(item2.itemList){
                                    // item2.itemList = JSON.parse(item2.itemList);
                                }else{
                                    item2.itemList = [];
                                }
                            })
                        });
                        this.modelist = data.data;
                    })
                })
            },
            modifyColumData(){
                let param = JSON.parse(JSON.stringify(this.modelist));
                param.forEach((item,i) => {
                    item.contextList.forEach((item2,i2)=>{
                        if(item2.bannerImageUrl&&item2.bannerImageUrl.length>0){
                            item2.bannerImageUrl = item2.bannerImageUrl.toString();
                        }else{
                            item2.bannerImageUrl = ''
                        }
                        if(item2.detailBannerImageUrl&&item2.detailBannerImageUrl.length>0){
                            item2.detailBannerImageUrl = item2.detailBannerImageUrl.toString();
                        }else{
                            item2.detailBannerImageUrl = ''
                        }
                    })
                });
                util.ajax({
                    url:config.baseApi + 'bookMall-admin/api/home/modifyColumData',
                    data:{
                        modeCode:this.modeCode,
                        data:JSON.stringify(param)
                    },
                    success:(data=>{
                        popup.miss({content:'修改成功！'});
                        this.getMallColumn();
                    })
                })
                console.log(param);
            },
            // 上
            up(i){
                let list = JSON.parse(JSON.stringify(this.modelist));
                let obj = list.splice(i,1)[0];
                list.splice(i-1,0,obj);
                list.forEach((item,i2)=>{
                    item.sort = i2+1;
                })
                this.modeIndex-=1;
                this.modelist = list;
            },
            // 下
            down(i){
                let list = JSON.parse(JSON.stringify(this.modelist));
                let obj = list.splice(i,1)[0];
                list.splice(i+1,0,obj);
                list.forEach((item,i2)=>{
                    item.sort = i2+1;
                })
                this.modeIndex+=1;
                this.modelist = list;
            },
            del(i){
                let list = JSON.parse(JSON.stringify(this.modelist));
                list.splice(i,1);
                list.forEach((item,i2)=>{
                    item.sort = i2+1;
                })
                this.modeIndex = 0;
                this.modelist = list;
            },
            tempShow(){
                this.tempObj = {
                    show:true,
                    choice:{}
                }
            },
            choice(item){
                let obj = JSON.parse(JSON.stringify(item));
                this.tempObj.choice = item;
            },
            commit(){
                let obj = {
                    columnCode:'',
                    columnName:this.tempObj.choice.templateName,
                    type:this.tempObj.choice.templateType,
                    sort:this.modelist.length,
                    title:'',
                    contextList:[],
                    maxContextCount:this.tempObj.choice.maxContextCount,
                }
                this.modelist.push(obj);
                this.tempObj.show = false;
            },
            addDetail(){
                let list = JSON.parse(JSON.stringify(this.modelist));
                list[this.modeIndex].contextList.push({
                    columnCode:'',
                    bannerImageUrl:[],
                    detailBannerImageUrl:[],
                    imageLink:'',
                    categId:'',
                    itemList:[],
                    sort:list[this.modeIndex].contextList.length
                })
                this.modelist = list;
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    this.getItemList(query).then(res=>{
                        this.itemlist = res;
                        this.loading = false;
                    })
                    // setTimeout(() => {
                    //     this.loading = false;
                    //     this.options4 = this.list.filter(item => {
                    //     return item.label.toLowerCase()
                    //         .indexOf(query.toLowerCase()) > -1;
                    //     });
                    // }, 200);
                } else {
                    this.itemlist = [];
                }
            },
            getItemList(keyWord){
                return new Promise((resolve,reject)=>{
                    util.ajax({
                        url:config.baseApi + 'bookMall-admin/api/item/getItemList',
                        data:{
                            keyWord:keyWord
                        },
                        success:(data=>{
                            resolve(data.data)
                        })
                    })
                })
            },
            change(e){
                if(!e)return;
                let arr = e.split('@@');

                let index = arr[0];
                let itemName = arr[1];
                let itemCode = arr[2];

                let list = JSON.parse(JSON.stringify(this.modelist));
                if(list[this.modeIndex].contextList[index].itemList.filter(item=>item.itemCode === itemCode).length>0)return;
                list[this.modeIndex].contextList[index].itemList.push({
                    itemName,
                    itemCode
                })
                this.modelist = list;
                this.keyWord = '';
            },
            close(item,i){
                item.splice(i,1)
            }
        },

    };
</script>